import React from 'react';
import {
  Container,
  Group,
  Button,
  Slider,
    NavBar,
} from 'amazeui-touch';

import {
    Link,
} from 'react-router';

import axios from 'axios';



const backNav = {
  component: Link,
  icon: 'left-nav',
  title: '返回',
  to: "/",
  onlyActiveOnIndex: true,
};



export default class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {flowerImgData: [],flowerData:{}}
    this.getFlowerImgsById();
    console.log(this.props.location.query);
  }


  getFlowerImgsById(id){
    console.log(this.props.params);
    var flowerId=this.props.params.id;
    {params: {
        id: flowerId
      }}
    axios.get("/api/flower/img",{params: {id: flowerId}})
        .then(res => {
        console.log(res);
          this.setState({ flowerImgData: res.data.data.imgItems,flowerData:res.data.data});
        });
  }

  render() {
    return (
        <view>
        <NavBar
            leftNav={[backNav]}
            amStyle="primary"
            />
      <Container scrollable >
        <Slider controls={false} >
          {this.state.flowerImgData.map((sliderItem, index) => {
            return (
              <Slider.Item key={index}>
                <img src={sliderItem.imgUrl} />
              </Slider.Item>
            );
          })}
        </Slider>
          <div className="detail">
            <div className="top-title">
              {this.state.flowerData.name}</div>
            <div className="main-title">商品详情:</div>
            <dl>
              <dt>主要花材</dt>
              <dd>{this.state.flowerData.material}</dd>
              <dt>包装</dt>
              <dd>{this.state.flowerData.packing}</dd>
              <dt>配送</dt>
              <dd>{this.state.flowerData.dispatching}</dd>
            </dl>
            <div className="block"></div>
            <div className="info">
              <img src="/i/s.jpg"></img>
              <img src="/i/s.jpg"></img>
            </div>
          </div>
      </Container>
        </view>
    );
  }
}
